<template>
    <view class="cell-group" :class="{className}" :style="styles">
        <view class="cell-group-item cell-group-item2">
            <view class="cell-group-header">
                <view class="cell-group-icon">
					<template v-if="customPrefix==='false'">
						<image 
							:src="icon" 
							lazy-load 
							class="cell-group-image" 
							:style="{backgroundColor: color,borderRadius:radius?'100%':'0',width:size+'rpx',height:size+'rpx'}" 
							v-if="icon"
						></image>
					</template>
					<template v-else>
						<uni-icons :custom-prefix="customPrefix" :type="icon" :size="size" :color="color" style="margin-right: 20rpx;" v-if="icon"></uni-icons>
					</template>
					<slot name="icon"></slot>
                </view>
                <view class="cell-group-headline">
                    <view class="cell-group-title">{{ title }}</view>
                    <slot name="title"></slot>
                    <view class="cell-group-sub-title">{{ subTitle }}</view>
                    <slot name="subTitle"></slot>
                </view>
            </view>
            <view class="cell-group-more" @tap="onBindtapMore" v-if="more">+</view>
            <slot name="action"></slot>
        </view>
		
		<view :style="{margin:card?'0 20rpx 20rpx':'0',borderRadius:card?'10rpx':'0',overflow:'hidden'}">
			<scroll-view :scroll-y="true" :style="{maxHeight:maxHeight,height:height}">
				<slot></slot>
			</scroll-view>
		</view>
    </view>
</template>

<script>
// components/cell-group/cell-group.js
export default {
    // 在组件定义时的选项中启用多slot支持
    data() {
        return {};
    },
    options: {
        multipleSlots: true
    },
    /**
     * 组件的属性列表
     */
    props: {
        className: {
            type: String,
            default: ''
        },
        styles: {
            type: String,
            default: ''
        },
        // 自定义图标
        customPrefix:{
        	type:String,
        	default:'iconfont'
        },
        // 图标图像
        icon: {
            type: String,
            default: ''
        },
        // 图标尺寸
        size:{
        	type:Number,
        	default:24
        },
        // 图标或图片颜色
        color: {
            type: String,
            default: ''
        },
		// 圆角图标
		radius:{
			type:Boolean,
			default:false
		},
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 副标题
        subTitle: {
            type: String,
            default: ''
        },
        // 最大高度
        maxHeight: {
            type: String,
            default: 'auto'
        },
        // 固定高度
        height: {
            type: String,
            default: 'auto'
        },
        // 右侧操作
        more: {
            type: Boolean,
            default: false
        },
		// 卡片模式
		card:{
			type:Boolean,
			default:true
		}
    },
    /**
     * 组件的方法列表
     */
    methods: {
        onBindtapMore(ev) {
            this.$emit('jftap', {
                detail: ev
            });
        }
    },
    beforeMount: function () {
        // 在组件实例进入页面节点树时执行
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    onPageShow: function () {
        // 页面被展示
    },
    onPageHide: function () {
        // 页面被隐藏
    },
    onPageResize: function (size) {
        // 页面尺寸变化
    }
};
</script>
<style>
.cell-group {

}
.cell-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    font-size: 26rpx;
    color: #666666;
}

.cell-group-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.cell-group-icon {
    
}
.cell-group-image {
    display: block;
    width: 48rpx;
    height: 48rpx;
	margin-right: 20rpx;
}
.cell-group-headline {
}
.cell-group-title {
	max-width: 60vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}
.cell-group-sub-title {
    font-size: 22rpx;
    color: #999999;
	max-width: 50vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}
.cell-group-more {
    font-size: 48rpx;
    line-height: 1;
}
</style>
